﻿@{
    ViewBag.Title = "Connections";
}

<h1>@ViewBag.Title</h1>
<div class="row-fluid">
    <div class="span8">
        @(Html.Kendo().ListView<TelerikedIn.WebApp.ViewModels.Connections.ConnectionsVM>()
            .Name("connections-list")
            .TagName("ul")
            .ClientTemplateId("list-template")
            .Pageable(p =>
            {
                p.Info(true);
                p.Refresh(true);
            })
            .DataSource(data =>
            {
                data.ServerOperation(true);
                data.PageSize(5);
                data.Read(r => r.Action("Read", "Connections"));
            })
            .HtmlAttributes(new { @class = "unstyled conn-ul" })
        )
    </div>

    <div class="span4 well">
        <h5>Add users in your connections</h5>
        <h6>Search by user name</h6>
        @using (Ajax.BeginForm("SearchUser", new AjaxOptions
    {
        UpdateTargetId = "search-results",
        InsertionMode = InsertionMode.Replace
    }))
        {
            <input type="text" name="searchQuery" maxlength="100" placeholder="User name.." class="" />
            <input type="submit" class="k-icon k-i-search" />
        }
        <div id="search-results"></div>
    </div>

</div>
@*todo style*@
<script type="invalid" id="list-template">
    <li class="row-fluid conn-li">

        <div class="span1">
            #if (Image && Image.length > 8) {#
                <img src="data:image/png;base64,#: Image #" width="47" height="47">
            #} else {#
                <img src="../img/default-image.jpg" width="47" height="47">
            #}#
        </div>

        <div class="span5">
           <div class="conn-user"><a href='Profile/UserDetails/#: UserId #' title="Go to #: FullName #'s account!">#: FullName #</a></div>
        </div>

        <div class="span1 text-right text-info">
            <strong class="conn-skills">Skills:</strong>
        </div>

        <ul class="span5 inline unstyled conn-skills-ul">
            #if(!Skills || Skills.length == 0) {#
                <li class="text-warning">No skills added by this user yet</li>
            #} else {#
                #for (var i = 0; i < Skills.length; i++) {#
                    <li class="text-info" title="Endorse user - go to profile">#: Skills[i].Name #</li>
                #}
            }#
        </ul>
    </li>
</script>

<script>
    function refreshUsers() {
        var kendoList = $("#connections-list")
            .data("kendoListView");

        kendoList.dataSource.read();
    }
</script>